<template>
  <el-row class="btn">
    <el-col :span="8">
      <el-button type="primary" @click="showTemplateDialogVisible = true">新建页面</el-button>
    </el-col>
  </el-row>

  <art-table :data="tableData" :loading="tableLoading" size="large">
    <el-table-column prop="name" label="页面名称" />
    <el-table-column prop="channel" label="渠道">
      <template #default> PC学员端 </template>
    </el-table-column>
    <el-table-column prop="type" label="页面类型">
      <template #default="scope">
        <el-tag type="primary" v-if="scope.row.used === 1">PC主页面</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="updateTime" label="更新时间" />
    <el-table-column prop="remark" label="备注" />
    <el-table-column fixed="right" label="操作" min-width="120">
      <template #default="scope">
        <a v-if="scope.row.used === 0" @click="handleEditPageType(scope.row)"
          style="color: var(--el-color-primary); cursor: pointer">设为主页</a>
        <el-divider v-if="scope.row.used === 0" direction="vertical" />
        <a style="color: var(--el-color-primary); cursor: pointer" @click="handleEdit(scope.row)">编辑</a>
        <el-divider direction="vertical" />
        <a style="color: var(--el-color-primary); cursor: pointer" @click="handleCopy(scope.row)">
          复制
        </a>
        <el-divider direction="vertical" />
        <a style="color: red; cursor: pointer" @click="handleDel(scope.row.id)">删除</a>
      </template>
    </el-table-column>
  </art-table>

  <template-choose-dialog v-if="showTemplateDialogVisible" :show-template-dialog-visible="showTemplateDialogVisible"
    :page-value="pageValue" @close="showTemplateDialogVisible = false"></template-choose-dialog>
</template>

<script setup lang="ts">
import { getPageList, delPage, editPageType, copyPageType } from '@/api/materialManagement'
import templateChooseDialog from './templateChooseDialog.vue'
const pageValue = ref(5)
const showTemplateDialogVisible = ref(false)
const tableLoading = ref(false)
const tableData = ref([])

const form = reactive({
  pageNum: 1,
  pageSize: 10,
  pageType: 5
})

async function getData() {
  try {
    tableLoading.value = true
    const res = await getPageList(form)
    if (res.code === '00000') {
      tableData.value = res.data.list
    }
  } catch (e) {
  } finally {
    tableLoading.value = false
  }
}

function handleDel(id: string) {
  ElMessageBox.confirm('确定要删除吗？', '提示', {
    type: 'warning',
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(() => {
    handleDelPage(id)
  })
}

async function handleEditPageType(item: any) {
  const res = await editPageType(item.id, {
    pageType: 5,
    used: 1
  })
  if (res.code === '00000') {
    ElMessage.success('修改成功')
    await getData()
  } else {
    ElMessage.error(res.msg)
  }
}

async function handleDelPage(id: string) {
  const res = await delPage(id)
  if (res.code === '00000') {
    ElMessage.success('删除成功')
    await getData()
  }
}

async function handleCopy(item: any) {
  ElMessageBox.confirm('确定要复制该页面吗？', '提示', {
    type: 'warning',
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(() => {
    handleCopyPageType(item.id)
  })
}

const handleCopyPageType = async (id: any) => {
  const res = await copyPageType({
    id
  })
  if (res.code === '00000') {
    ElMessage.success('复制成功')
    await getData()
  }
}

function handleEdit(item: any) {
  const url = `${window.location.origin}/admin/#/pcPageDiy/pcDesign?type=edit&id=${item.id}`
  window.open(url, '_blank')
}

onMounted(() => {
  getData()
})
</script>

<style scoped lang="scss"></style>
